<template>
  <a-config-provider :locale="locale === 'en' ? enUS : zhCN">
    <router-view />
  </a-config-provider>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
import enUS from "ant-design-vue/es/locale/en_US";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";

moment.locale("cn"); // en

export default defineComponent({
  name: "App",
  setup() {
    const { commit, getters } = useStore();
    const proxy = getCurrentInstance()?.proxy;
    const selectedPalette = getters.setting.selectedPalette;

    // 国际化组件
    const locale = ref(zhCN.locale);
    proxy?.$eventBus.$on("localeChange", (res: string) => {
      if (res === "en") {
        locale.value = enUS.locale;
      } else {
        locale.value = zhCN.locale;
      }
      moment.locale(zhCN.locale);
    });

    onBeforeUnmount(() => {
      proxy?.$eventBus.$off("localeChange", () => {});
    });

    // 设置主题
    if (proxy?.$utils.$isTrue(selectedPalette)) {
      commit("CHANGE_THEME", { inx: selectedPalette, flag: "isInit" });
    }

    return {
      locale,
      enUS,
      zhCN,
    };
  },
});
</script>


<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
</style>
